<template>
    <v-container fluid>
        <v-list lines="three" item-props>
            <v-list-item title="全部单词"/>
            <v-list-item @click="selectBook(book.id)" v-bind:key="book.id" v-for="book in bookList" :value="book.id"
                :title="book.title" :subtitle="book.remark"></v-list-item>
        </v-list>
        <v-pagination active-color="blue" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" :length="total"
            style="margin-bottom: 30px;" @update:model-value="selectPage" :model-value="bookBo.pageNum" />
    </v-container>
</template>

<script>
import { bookList } from "@/api/book.js";
export default {
    name: 'MineDictation',
    components: {  },
    data() {
        return {
            snackbar:false,
            dialog: false,
            bookList: [],
            total:0,
            bookBo: {
                pageSize: 20,
                pageNum: 1
            },
            book: {},
            snackbarMsg:''
        }
    },
    created() {
        this.getBookList()
    },
    methods: {
        getBookList() {
            bookList(this.bookBo).then(resp => {
                this.bookList = resp.rows;
                if (resp.total % this.bookBo.pageSize == 0)
                    this.total = resp.total / this.bookBo.pageSize
                else this.total = parseInt(resp.total / this.bookBo.pageSize) + 1
            })
        },
        selectBook(bookId){
            let option=this.$route.params.option
            let routeName
            if (option=='choose') {
                routeName='practice-choose'
            } else if(option=='listen'){
                routeName='practice-listening-writing'
            }
            this.$router.push({ name: routeName, 
            params: { bookId:bookId } })
        },
        selectPage(num) {
            this.bookBo.pageNum = num
            this.getBookList()
        },
    }
}
</script>

<style scoped>
.btn_float {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.toolbar {
    position: fixed;
    top: 65px;
    width: 100%;
    left: 0;
    z-index: 100;
    height: fit-content;
}
</style>